<template>
  <view class="listen-bg">
    <!-- 背景图片 -->
    <image class="bg-image" src="/static/bg.jpg" mode="aspectFill"></image>
    <!-- 自定义顶部栏 -->
    <view class="custom-navbar">
      <view class="navbar-title">听力星球</view>
      <view class="navbar-right"></view>
    </view>
    <!-- 内容区 -->
    <view class="listen-content glass-effect">
      <!-- 搜索与智能问答 -->
      <view class="search-bar">
        <input class="search-input" placeholder="请输入相关问题" v-model="searchValue" />
        <button class="search-btn">智能问答</button>
      </view>
      <!-- tab栏 -->
      <view class="tab-bar">
        <view :class="['tab-item', activeTab === 0 ? 'active' : '']" @tap="activeTab = 0">真题听力</view>
        <view :class="['tab-item', activeTab === 1 ? 'active' : '']" @tap="activeTab = 1">VOA慢速英语</view>
        <view :class="['tab-item', activeTab === 2 ? 'active' : '']" @tap="activeTab = 2">TED演讲</view>
        <view :class="['tab-item', activeTab === 3 ? 'active' : '']" @tap="activeTab = 3">其他</view>
      </view>
      <!-- 真题听力子tab -->
      <view v-if="activeTab === 0" class="sub-tab-bar">
        <view :class="['sub-tab-item', subTab === 0 ? 'active' : '']" @tap="subTab = 0">四级</view>
        <view :class="['sub-tab-item', subTab === 1 ? 'active' : '']" @tap="subTab = 1">六级</view>
      </view>
      <!-- 题目列表 -->
      <view class="paper-list">
        <view v-for="item in paperList" :key="item.id" class="paper-item">
          <text>{{ item.title }}</text>
          <view class="arrow">></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ListenIndex',
  data() {
    return {
      userInfo: {
        avatar: ''
      },
      searchValue: '',
      activeTab: 0, // 0:真题听力 1:VOA 2:TED 3:其他
      subTab: 0, // 0:四级 1:六级
      paperList: []
    }
  },
  onLoad() {
    this.fetchUserInfo();
    this.fetchPaperList();
  },
  methods: {
    // 预留：获取当前用户信息接口
    async fetchUserInfo() {
      // TODO: 调用后端API获取当前用户信息
      // const res = await uni.request({ url: '/api/user/info' })
      // this.userInfo = res.data
    },
    // 预留：获取题目列表接口
    async fetchPaperList() {
      // TODO: 调用后端API获取题目列表
      // const res = await uni.request({ url: '/api/listen/paper-list' })
      // this.paperList = res.data
      // mock数据
      this.paperList = [
        { id: 1, title: '2024年12月大学英语四级真题卷一听力' },
        { id: 2, title: '2024年12月大学英语四级真题卷二听力' },
        { id: 3, title: '2024年6月大学英语四级真题卷一听力' },
        { id: 4, title: '2024年6月大学英语四级真题卷二听力' },
        { id: 5, title: '2023年12月大学英语四级真题卷一听力' },
        { id: 6, title: '2023年12月大学英语四级真题卷二听力' },
        { id: 7, title: '2023年6月大学英语四级真题卷一听力' },
        { id: 8, title: '2023年6月大学英语四级真题卷二听力' },
        { id: 9, title: '2023年3月大学英语四级真题听力' },
        { id: 10, title: '2022年12月大学英语四级真题卷一听力' }
      ]
    }
  }
}
</script>

<style lang="scss">
.listen-bg {
  min-height: 100vh;
  position: relative;
  padding-bottom: 32rpx;
}
.bg-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.custom-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  padding: 0 24rpx;
  background: transparent;
  padding-top: calc(env(safe-area-inset-top) + 68px);
  box-sizing: border-box;
  margin-bottom: 60rpx;
}
.navbar-left {
  display: flex;
  align-items: center;
  gap: 12rpx;
}
.navbar-avatar {
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  background: #fff;
  border: 2rpx solid #eaeaea;
}
.navbar-title {
  flex: 1;
  text-align: center;
  font-size: 32rpx;
  color: #222;
  font-weight: bold;
  margin-left: 48rpx;
}
.navbar-right {
  width: 48rpx;
  height: 48rpx;
}
.listen-content {
  margin: 0 24rpx;
  border-radius: 24rpx;
  background: rgba(255,255,255,0.7);
  box-shadow: 0 2rpx 8rpx 0 rgba(24,60,107,0.06);
  padding: 32rpx 0 24rpx 0;
  overflow: hidden;
}
.glass-effect {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.search-bar {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 40rpx;
  box-shadow: 0 4rpx 16rpx 0 rgba(0,0,0,0.08);
  padding: 0 24rpx 0 24rpx;
  margin: 32rpx 24rpx 32rpx 24rpx;
  height: 80rpx;
}
.search-input {
  flex: 1;
  height: 80rpx;
  border-radius: 40rpx;
  border: none;
  background: transparent;
  padding: 0 20rpx;
  font-size: 30rpx;
  color: #222;
}
.search-btn {
  margin-left: 16rpx;
  height: 64rpx;
  min-width: 160rpx;
  border-radius: 32rpx;
  background: #183c6b;
  color: #fff;
  font-size: 30rpx;
  border: none;
  box-shadow: 0 4rpx 16rpx 0 rgba(24,60,107,0.12);
  padding: 0 32rpx;
}
.tab-bar {
  display: flex;
  align-items: center;
  background: transparent;
  border-radius: 32rpx;
  margin: 0 24rpx 18rpx 24rpx;
  padding: 0;
  gap: 0;
  position: relative;
}
.tab-item {
  flex: 1;
  text-align: center;
  font-size: 30rpx;
  color: #8a98b3;
  padding: 18rpx 0 12rpx 0;
  background: transparent;
  position: relative;
  font-weight: 500;
}
.tab-item.active {
  color: #fff;
  background: #183c6b;
  border-radius: 32rpx 32rpx 0 0;
}
.tab-item.active::after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 48rpx;
  height: 6rpx;
  background: #183c6b;
  border-radius: 3rpx;
}
.sub-tab-bar {
  display: flex;
  align-items: center;
  background: #f6f7fa;
  border-radius: 32rpx;
  margin: 0 24rpx 18rpx 24rpx;
  padding: 8rpx;
  gap: 0;
}
.sub-tab-item {
  flex: 1;
  text-align: center;
  font-size: 28rpx;
  color: #183c6b;
  padding: 18rpx 0;
  border-radius: 28rpx;
  background: #f6f7fa;
  font-weight: 500;
  transition: background 0.2s, color 0.2s;
}
.sub-tab-item.active {
  background: #183c6b;
  color: #fff;
}
.paper-list {
  padding: 0 24rpx;
}
.paper-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 28rpx;
  color: #222;
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 18rpx;
  padding: 24rpx 18rpx;
  box-shadow: 0 2rpx 8rpx 0 rgba(24,60,107,0.04);
}
.arrow {
  color: #8a98b3;
  font-size: 32rpx;
}
</style> 